<template>
  <div class="">
    <div class="news" @click="showNews">
      <i class="iconfont iconxiaoxi"></i>
      <span>12</span>
    </div>
    <transition name="news">
      <div class="right" v-if="ishow">
        <ul>
          <transition-group name="news">
            <li
              v-for="(comment, index) in commentes"
              @click="intoShare(comment)"
              :key="index"
            >
              <div class="ablum">
                <img
                  class="ablum fl"
                  src=""
                  alt=""
                />
                <span style="font-size: 17px; font-weight: 600">美好时光</span>
                <span style="font-size: 12px; color: #f56c6c">{{
                  comment.from
                }}</span>
                <br />
                <span class="userName" style="color: #638dee"
                  >@{{ comment.username }}</span
                >回复了你 :
                <span class="comment" style="">{{ comment.commentes }}</span>
                <label class="time">{{ comment.time }}</label>
                <i
                  class="iconfont iconchushaixuanxiang"
                  @click.stop="deleteNews(comment, index)"
                ></i>
              </div>
            </li>
          </transition-group>
        </ul>
        <el-button
          type="info"
          plain
          size="small"
          @click="deleteAllNews"
          class="clearAll"
          >清空消息栏</el-button
        >
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentes: [
        {
          username: "diaoge1",
          toname: "rooot",
          commentes:
            "这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错",
          time: "05-16 18:19",
          from: "你的关注（小团团）发布了新相册!",
        },
        {
          username: "diaoge2",
          toname: "rooot",
          commentes: "这个很不错",
          time: "05-16 18:19",
        },
        {
          username: "diaoge3",
          toname: "rooot",
          commentes: "这个很不错",
          time: "05-16 18:19",
        },
        {
          username: "diaoge1",
          toname: "rooot",
          commentes:
            "这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错",
          time: "05-16 18:19",
        },
        {
          username: "diaoge1",
          toname: "rooot",
          commentes:
            "这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错",
          time: "05-16 18:19",
        },
        {
          username: "diaoge1",
          toname: "rooot",
          commentes:
            "这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错这个很不错",
          time: "05-16 18:19",
        },
      ],
      ishow: false,
    };
  },
  mounted() {
    // setInterval(()=>{
    this.getdata();
    // },1000)
  },
  methods: {
    //获取推送
    getdata() {
      this.$http.get("/api/message").then((res) => {
        console.log(res);
      });
    },
    //删除一项
    deleteNews(comment, index) {
      this.commentes.splice(index, 1);
    },
    //删除所有
    deleteAllNews() {
      console.log("删除所有");
    },
    //进入分享页
    intoShare(comment) {
      console.log("进入分享页");
    },
    //是否显示消息栏
    showNews() {
      this.ishow = !this.ishow;
      let that = this;
      window.onclick = function (event) {
        //点击外部关闭
        if (event.target == document.querySelector(".iconxiaoxi")) {
          return;
        }
        if (
          event.target != document.querySelector(".right") &&
          event.target != document.querySelector(".ablum") &&
          event.target != document.querySelector(".clearAll")
        ) {
          that.ishow = false;
        }
      };
    },
  },
};
</script>

<style scoped="scoped">
.el-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.right {
  position: fixed;
  right: 10px;
  top: 60px;
  width: 400px;
  height: calc(100% - 80px);
  background-color: #f1f6fa;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.right ul {
  width: 100%;
  font-size: 14px;
  text-align: left;
}
.right ul li {
  position: relative;
  width: 100%;
  height: 90px;
  overflow: hidden;
  padding-left: 30px;
  padding-top: 15px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: #f8f8f8 solid 2px;
  cursor: pointer;
}
.ablum img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  vertical-align: top;
  border-radius: 10px;
}
.ablum span {
  margin-left: 10px;
  font-family: "zhengkan";
  font-size: 16px;
  color: #504984;
}
.ablum .comment {
  font-size: 16px;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
  display: inline-block;
  text-overflow: ellipsis;
}
.ablum .time {
  position: absolute;
  width: 80px;
  display: inline-block;
  bottom: 0px;
  right: -5px;
  font-size: 12px;
  color: #c1c0c0;
}
.right ul li:hover .iconchushaixuanxiang {
  opacity: 1;
}
.iconchushaixuanxiang {
  color: #d81e06;
  position: absolute;
  top: 5px;
  cursor: pointer;
  font-size: 18px;
  right: 0px;
  opacity: 0;
  transition: 0.5s;
}
.news {
  width: 60px;
  height: 40px;
  cursor: pointer;
}
.news > span {
  position: relative;
  top: -18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  font-size: 12px;
  background-color: #d80000;
  color: white;
  border-radius: 50%;
}
.iconxiaoxi {
  font-size: 30px;
}
</style>
